<template>
  <view>
    <view class="wrap">
      <view class="list" :class="Data.type == 0 ?'list_active_red':Data.type == 1 ? 'list_active_blue':'list-item__black'">
        <view class="list-item">
          <view class="list-item__container container--right">
            <view class="list-item__header">
              <view class="list-item__icon">￥<text class="list-item__price">{{Data.price}}</text> </view>
            </view>
            <view class="list-item__content">
              <text class="list-item__content-title">{{Data.title}}</text>
              <text class="list-item__content-note">{{Data.time}}</text>
            </view>
            <view class="list-item__extra">
              <view class="list-item__extra-text_t">{{Data.type == 2 ?'已过期':'已领取'}}</view>
              <view class="list-item__extra-text_b">查看详情</view>
            </view>
          </view>
        </view>
      </view>
      <u-line color="#e4e7ed" :hair-line="false" />
      <view class="detail">
        <view class="detail-title">优惠券详情</view>
        <view class="cell-item-box">
          <view class="cell">
            <view class="cell_title">适用商品ID</view>
            <view class="cell__value">商品名称</view>
            <view class="cell__icon-wrap"><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
          </view>
          <view class="cell">
            <view class="cell_title">优惠券ID</view>
            <view class="cell__value" :class="Data.type == 2 ?'text-decoration':''">3586189716548915844164</view>
            <view class="cell__icon-wrap"></view>
          </view>
          <view class="detail_QR" v-if="Data.type != 2">
            <image src="/static/image/1.png" mode="aspectFit" class="img"></image>
          </view>
          <u-line color="#e4e7ed" :hair-line="false" v-if="Data.type != 2" />
          <view class="cell">
            <view class="cell_title">数量</view>
            <view class="cell__value">1张</view>
            <view class="cell__icon-wrap"><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
          </view>
          <view class="cell">
            <view class="cell_title">所有者ID</view>
            <view class="cell__value">200899677</view>
            <view class="cell__icon-wrap"></view>
          </view>
          <view class="cell">
            <view class="cell_title">手机号</view>
            <view class="cell__value">13566678928</view>
            <view class="cell__icon-wrap"></view>
          </view>
          <view class="cell">
            <view class="cell_title">使用规则</view>
            <view class="cell__value"></view>
            <view class="cell__icon-wrap"></view>
          </view>
          <view class="u-p-t-32">
            <view class="cell-text">1.本券为9.9嘉上美学中秋狂欢夜福利兑换券;</view>
            <view class="cell-text">2.本券无门槛使用;</view>
            <view class="cell-text">3.此券不兑现、不找零，一经使用概不退换;</view>
            <view class="cell-text">4.本券仅限2022年9月9日当天使用;</view>
            <view class="cell-text">5.活动举办机构保留法律允许范围内的最终解释权。</view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 200rpx;background-color: #fff;"></view>
    <view class="s-btn s-btn--primary s-size-default">关闭</view>
  </view>
</template>

<script>
  var vm;
  export default {
    data() {
      return {
        lists: [{
            name: '有效'
          },
          {
            name: '过期'
          },
        ],
        Data:{
          price:10,
          title:'满250使用(限领一张)',
          time:'有效期至2023.12.30 23:59',
          type:0
        },
      };
    },
    onLoad(options) {
      vm = this;
      vm.Data.type = options.type
    },
    mounted() {
    
    },
    methods: {
      
    }
  };
</script>



<style lang="scss" scoped>
  .wrap {
    display: flex;
    flex-direction: column;
    // height: calc(100vh - var(--window-top));
    width: 100%;
    background-color: #fff;
    padding: 32rpx;
  }
  .img{
    width: 100%;
    height: 100%;
  }
  .list{
    margin-bottom: 24rpx;
    border-radius: 28rpx;
    color: #fff;
    .list-item{
      display: flex;
      font-size: 32rpx;
      position: relative;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      cursor: pointer;
      .list-item__container{
        position: relative;
        display: flex;
        flex-direction: row;
        flex: 1;
        overflow: hidden;
        .list-item__header {
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 32rpx 0 32rpx 32rpx;
          .list-item__icon{
            margin-right: 36rpx;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 24rpx;
            .list-item__price{
              font-size: 36rpx;
            }
          }
        }
        .list-item__content{
          display: flex;
          padding-right: 16rpx;
          flex: 1;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
          padding: 32rpx 0;
          .list-item__content-title{
            font-size: 28rpx;
            overflow: hidden;
          }
          .list-item__content-note{
            margin-top: 6rpx;
            font-size: 24rpx;
            overflow: hidden;
          }
        }
        .list-item__content--center{
          justify-content: center;
        }
        .list-item__extra{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding:0 32rpx;
          margin: 16rpx 0;
          border-left:2rpx dashed #fff;
          .list-item__extra-text_t{
            font-size: 28rpx;
          }
          .list-item__extra-text_b{
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .list_active_red{
    background-color: #fa5251
  }
  .list_active_blue{
    background-color: #5257fb
  }
  .list-item__black{
    background-color: #f3f3f3;
    color: #303133;
    .list-item__extra{
      border-left:2rpx dashed #303133 !important;
    }
  }
  
  .detail{
    .detail-title{
      margin-top: 56rpx;
    }
    .cell{
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;
      box-sizing: border-box;
      width: 100%;
      padding: 48rpx 0 0 0;
      font-size: 14px;
      line-height: 27px;
      background-color: #fff;
      text-align: left;
      .cell__title{
        font-size: 28rpx;
        width: auto;
      }
      .cell__value{
        overflow: hidden;
        text-align: right;
        vertical-align: middle;
        flex: 1;
      }
      .cell__icon-wrap{
        margin-left: 10rpx;
      }
    }
    .cell-text{
      line-height: 2;
    }
    .detail_QR{
      width: 400rpx;
      height: 400rpx;
      padding: 48rpx 0;
      margin:0 auto;
    }
  }
  .text-decoration{
    text-decoration:line-through;
  }
</style>
